<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8">
<title>
</title>
<style>
* {
padding: 0px;
margin: 0px;
}

.list {
width: 300px;
margin: 0px auto;
height: 500px;
}

a {
border-radius: 5px;
text-decoration: none;
display: block;
height: 30px;
width: 100%;
position: relative;
color: #000;
font-size: 13px;
background: #fff;
line-height: 30px;
border-bottom: 1px solid #dedede;
/* text-align: center; */
padding-left: 50px;
box-sizing: border-box;

}

li {
list-style: none;
}

.t2,
.t3,
.t4,
.t5 {
display: none;
}

i {
width: 16px;
height: 16px;
position: absolute;
top: 8px;
left: 15px;
/* padding:7px 0px; */
display: inline-block;
background: url(img/leftJia.png) no-repeat;
}

.current {
background: #ccc;
font-size: 16px;
}

.t2,
.t3,
.t4,
.t5 {
padding-left: 20px;
}
</style>
</head>

<body>

<div class="list">
<!-- 	<table class="listBox">
<ul class='t1'>
<li>
<a href="javascript:;" title="1" class="buttn"><i></i>一级菜单</a>
<ul class='t2'>
<li>
	<a href="javascript:;" title="1" class="butt"><i></i>二级菜单</a>
	<ul class='t3'>
		<li>
			<a href="javascript:;" title="1" class="butt"><i></i>三级菜单</a>
			<ul class='t4'>
				<li><a href="javascript:;">四级菜单</a> </li>
				<li><a href="javascript:;">四级菜单</a> </li>
			</ul>
		</li>
	</ul>
</li>
</ul>
</li>			
</ul>
</table> -->
</div>
</body>
<script src="./js/jquery.min.js"></script>
<script>
$(function() {

$.ajax({
type: "GET",
url: "./mock/data.json",
contentType:'application/json',
async: false,
success: function(res) {
// console.log(JSON.stringify(res.rows));
var html1 = '<ul class="t1">';
res.rows.forEach((item1, i) => {
var h1 = '<li><a href="javascript:;" title="1" class="buttn"><i></i>' + item1.name + '</a><ul class="t2">';
if (item1.subTbTeamsList) {
item1.subTbTeamsList.forEach((item2, i) => {
	var h2 = '<li><a href="javascript:;" title="1" class="butt"><i></i>' + item2.name +
		'</a><ul class="t3">';
	if (item2.subTbTeamsList) {
		item2.subTbTeamsList.forEach((item3, t) => {
			var h3 = '<li><a href="javascript:;" title="1" class="butt"><i></i>' + item3.name +
				'</a><ul class="t4">';
			if (item3.tbmList) {
				item3.tbmList.forEach((item4, i) => {
					// console.log(item4);
					var h4 = '<li><a href="javascript:;" title="1" >' + item4.name + '</a>';
					h3 = h3 + h4 + '</li>';
				})
			}
			if (item3.subTbTeamsList) {
				item3.subTbTeamsList.forEach((item4, i) => {
					// console.log(item4);
					var h4 = '<li><a href="javascript:;" title="1" class="butt"><i></i>' + item4.name +
						'</a><ul class="t5">';

					if (item4.tbmList) {
						item4.tbmList.forEach((item5, i) => {
							var h5 = '<li><a href="javascript:;" title="1">' + item5.name + '</a>';
							h4 = h4 + h5 + '</li>';
						})
					}
					h3 = h3 + h4 + '</ul></li>';
				})

			}
			h2 = h2 + h3 + '</ul></li>';
		})
	}
	if (item2.tbmList) {
		item2.tbmList.forEach((item3) => {
			var h3 = '<li><a href="javascript:;" title="1" >' + item3.name + '</a><ul class="t4">';
			h2 = h2 + h3 + '</ul></li>';
		})
	}
	h1 = h1 + h2 + '</ul></li>';
})
}
if (item1.tbmList) {
item1.tbmList.forEach((item2, i) => {
	var h2 = '<li><a href="javascript:;" title="1">' + item2.name + '</a><ul class="t3">';
	h1 = h1 + h2 + '</ul></li>';
})

}
html1 = html1 + h1 + '</ul></li>';
})
var ht = html1 + '</ul>';
console.log(ht);
$(".list").append(ht);
},
err: function(e) {
console.log(e);
}
})

$(".buttn").click(function() {
sum1($(this), $(this).attr('title'));
})
$(".butt").click(function() {
sum1($(this), $(this).attr('title'));
})
})

function sum1(e, h) {
e.attr("title", parseInt(e.attr('title')) + 1);
// console.log(h);
//	e.parent().siblings().children('a').removeClass("current");
e.parent().children("ul").toggle(500);
if (h % 2 == 1) {
e.children('i').css({
'background-image': "url(img/leftJian.png)"
});
e.addClass("current");
e.parent().siblings().children("ul").hide(500);
e.parent().siblings().children('a').children("i").css({
'background-image': "url(img/leftJia.png)"
});
//console.log(p);
e.parent().siblings().children('a').removeClass("current");
//var p=parseInt(e.parent().siblings().children('a').attr("title"))+1;
var p = parseInt(e.parent().siblings().children('a').attr("title"));
if (p % 2 == 0) {
p++;
} else if (p % 2 == 1) {
p = p;
}
e.parent().siblings().children('a').attr('title', p);
//console.log(e.parent().children("li").children("ul"));
} else if (h % 2 == 0) {
e.children('i').css({
'background-image': "url(img/leftJia.png)"
});
e.removeClass("current");

}
}

// function sum2(e, s) {
// 	e.attr("title", parseInt(e.attr('title')) + 1);
// 	e.parent().siblings().children('a').removeClass("current");
// 	e.addClass("current");
// 	e.parent().children("ul").toggle(500);
// 	if (s % 2 == 1) {
// 		e.children('i').css({
// 			'background-image': "url(img/leftJian.png)"
// 		});
// 		e.addClass("current");
// 	} else if (s % 2 == 0) {
// 		e.children('i').css({
// 			'background-image': "url(img/leftJia.png)"
// 		});
// 		e.removeClass("current");
// 	}
// 	//e.parent().children().children("ul").hide();
// }
</script>
</html>
